// 歌单详情
import { memo } from 'react';
import styled from 'styled-components';
import { transformNumberToWords } from "@/utils"
import { Button } from "@/components/CwFormCpn/"
import { BiCommentDetail, BiShareAlt, BiPlayCircle, BiCollection, BiPlay } from "react-icons/bi"
const DetailsCardContainer = styled.div.attrs(({ theme }) => theme)`
    @media screen  and (max-width:960px){
        .play-data{
            overflow:hidden;
            margin: 2.4rem 0;
            width:100%;
            justify-content:center;
            .play-data-item{
                flex:1;
                flex-direction:column;
                padding:1rem;
                font-size:.1rem;
            }
        }
    }
    .cover{
        width:3.1rem;
        box-shadow: 0px 0px 5px ${props => props.secondaryTextColor};
        float:left;
        margin-right:.3rem;
        border-radius: 50%;
        border:10px solid ${props => props.secondaryTextColor}
    }
    .name{
        font-size:.5rem;
    }
   
    .tags{
        margin: .2rem 0 5px;
        line-height: 15px;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        .tag-item{
            padding:.1rem;
            margin: .05rem  3px ;
            background-color:${props => props.activeBackgroundColor};
            border-radius:4px;
            color:${props => props.activeTextColorWitchActiveBackgroundColor};

        }
    }
     .description{
         width:50%;
        font-size:.2rem;
        margin-top: 2px;
        line-height: 18px;
        color: ${props => props.secondaryTextColor};
        
    }
    .play-data{
        display:flex;
        text-align:center;
        margin:.4rem 0;
        .play-data-item{
            display:flex;
            justify-content:center;
            flex-wrap:wrap;
            text-align:center;
            align-items:center;
            font-size:.08rem;
            padding:.13rem;
            margin-right:.1rem;
            border-radius:6px;
            .icon{
                vertical-align:middle;
                font-size:.4rem;
            }
        }
        
    }
`

export default memo(function DetailsCard ({ playListInfo }) {
    return <DetailsCardContainer>
        <img className='cover' src={playListInfo?.coverImgUrl + "?param=200y200"} />
        <p className='name'>{playListInfo?.name}</p>
        <div className="tags">
            <span>标签:</span>
            {playListInfo?.tags?.map(item => <span key={item} className='tag-item'>{item}</span>)}
        </div>
        <div className='description text-overflow'>
            <p>介绍:</p>
            <p>{playListInfo?.description ? playListInfo?.description : "无"}</p>
        </div>
        <div className="play-data">
            <Button className='play-data-item'>
                <BiPlay className='icon' />
                <span className='text-overflow'>Play All</span>
            </Button>
            <Button className='play-data-item'>
                <BiCommentDetail className='icon' />
                <span className='text-overflow'>({transformNumberToWords(playListInfo?.commentCount)})</span>
            </Button>
            <Button className='play-data-item'>
                <BiShareAlt className='icon' /> <span className='text-overflow'>({transformNumberToWords(playListInfo?.shareCount)})</span>
            </Button>
            <Button className='play-data-item'>
                <BiPlayCircle className='icon' /> <span className='text-overflow'>({transformNumberToWords(playListInfo?.playCount)})</span>
            </Button>
            <Button className='play-data-item'>
                <BiCollection className='icon' /> <span className='text-overflow'>({transformNumberToWords(playListInfo?.subscribedCount)})</span>
            </Button>
        </div>
    </DetailsCardContainer>
})